<template>
    <div class="login_box">
        <div class="login_info">
            <div class="titles">{{siteTitle}}</div>
            <div class="infos_tips">注册个人会员账号</div>
            <div class="input_box"><input v-model="phone" placeholder="手机号"/></div>
            <div class="sms_box">
                <input v-model="code" placeholder="输入验证码"/>
                <div :class="{'active_btn':phone}" class="sms_btn" @click="GetVerificationCode">{{ sendTime }}</div>
            </div>
            <div class="input_box"><input type="password" v-model="password" placeholder="请输入密码"/></div>
            <div class="input_box"><input type="password" v-model="again_password" placeholder="再次输入密码"/></div>
            <div class="input_box"><input v-model="name" placeholder="姓名（必填）"/></div>
            <div class="input_box"><input v-model="company" placeholder="单位（必填）"/></div>
            <div class="input_box"><input v-model="landline" placeholder="单位座机（选填）"/></div>
            <div class="input_box"><input v-model="department" placeholder="部门/系/学院（选填）"/></div>
            <div class="input_box"><input v-model="email" placeholder="邮箱（选填）"/></div>
            <div class="btn_box" @click="userRegister">注册</div>
            <div @click="goLogin" class="tips_login">
                <span>已有账号，去登陆</span>
            </div>
        </div>
        <transition name="slide-fade">
            <div class="city_location_box" v-if="downLoadShow">
                <div class="location_box">
                    <div class="login_icons">
                        <img src="../../assets/registered-successfully-red.png">
                        <div>注册成功</div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
    import {getSendCode, userRegister} from "@/api/apis";

    export default {
        name: "register",
        data() {
            return {
                sendTime: '获取验证码',
                snsMsgWait: 900,
                name: '',
                phone: '',
                code: '',
                company: '',
                department: '',
                landline: '',
                email: '',
                password: '',
                again_password: '',
                downLoadShow: false
            }
        },
        computed: {
            siteTitle() {
                return this.$store.state.siteTitle;
            }
        },
        methods: {
            goLogin() {
                this.$router.push({name: 'login'})
            },
            //用户手机验证码
            GetVerificationCode() {
                var phoneReg = /^1[3|4|5|6|7|8|9]\d{9}$/;
                if (!this.phone) {
                    this.$message.warning('请输入手机号');
                } else if (!phoneReg.test(this.phone)) {
                    this.$message.warning('请输入正确的手机号');
                } else {
                    if (this.snsMsgWait >= 900) {
                        let data = {phone: this.phone}
                        getSendCode(data).then(() => {
                            this.$message.success('验证码已发送')
                            this.inter = setInterval(function () {
                                this.sendTime = this.snsMsgWait + 's'
                                this.snsMsgWait = this.snsMsgWait - 1
                                if (this.snsMsgWait < 0) {
                                    clearInterval(this.inter);
                                    this.sendTime = '重新发送'
                                    this.snsMsgWait = 900
                                }
                            }.bind(this), 1000);
                        })
                    } else {
                        this.$message.warning("太频繁了，请稍后再试！")
                    }
                }
            },
            //注册
            userRegister() {
                let data = {
                    name: this.name,
                    phone: this.phone,
                    code: this.code,
                    company: this.company,
                    department: this.department,
                    landline: this.landline,
                    email: this.email,
                    password: this.password,
                    again_password: this.again_password
                }
                userRegister(data).then(res => {
                    window.localStorage.setItem('token', res.data.token)
                    this.downLoadShow = true
                    setTimeout(() => {
                        this.downLoadShow = false
                        this.$router.push({name: 'home'});
                        this.$store.commit('GetUserInfo');
                    }, 500)
                })
            },
        }
    }
</script>

<style scoped lang="less">
    .login_box {
        min-height: 100vh;
        display: flex;
        align-items: center;
        cursor: pointer;
        
        .login_info {
            width: 480px;
            padding: 60px 0;
            background: #FFFFFF;
            border: 1px solid #9D9D9D;
            margin: 0 auto;
            
            .titles {
                text-align: center;
                font-size: 24px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                color: #000000;
                margin-bottom: 29px;
            }
            
            .infos_tips {
                font-size: 20px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #000000;
                margin-bottom: 37px;
                text-align: center;
            }
            
            .input_box {
                text-align: center;
                
                input {
                    background: #FFFFFF;
                    border: 1px solid #C7C7C7;
                    height: 42px;
                    padding: 0 20px;
                    width: 300px;
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    line-height: 19px;
                    opacity: 1;
                    box-sizing: border-box;
                    margin-bottom: 20px;
                }
            }
            
            .sms_box {
                display: flex;
                align-items: center;
                width: 300px;
                justify-content: space-between;
                margin: 0 auto 20px;
                
                input {
                    padding: 0 20px;
                    width: 168px;
                    height: 42px;
                    background: #FFFFFF;
                    border: 1px solid #C7C7C7;
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    box-sizing: border-box;
                }
                
                .sms_btn {
                    width: 112px;
                    height: 42px;
                    background: #C7C7C7;
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    line-height: 42px;
                    color: #FFFFFF;
                    text-align: center;
                }
                
                .active_btn {
                    background: #B11E24;
                }
            }
            
            .btn_box {
                width: 300px;
                height: 42px;
                background: #B11E24;
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                line-height: 42px;
                color: #FFFFFF;
                text-align: center;
                margin: 20px auto;
            }
            
            .tips_login {
                width: 300px;
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
                
                span {
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #B11E24;
                }
            }
        }
        
        .city_location_box {
            position: fixed;
            width: 100%;
            height: 100vh;
            background: rgba(0, 0, 0, 0.21);
            left: 0;
            bottom: 0;
            z-index: 5;
            
            .location_box {
                width: 480px;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                border: 1px solid #9D9D9D;
                z-index: 6;
                background: #FFFFFF;
                height: 331px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 8px;
                
                .login_icons {
                    text-align: center;
                    
                    img {
                        width: 68px;
                        height: 68px;
                        margin-bottom: 20px;
                    }
                    
                    div {
                        font-size: 20px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #000000;
                    }
                }
            }
        }
    }
</style>
